<template>
    
    <div class="films-page">
        <van-tabs>
            <van-tab title="正在热映">
                <FancyList :request="onRequest">
                    <template #default="scoped">
                        <FilmItem :data="scoped"/>
                    </template>
                </FancyList>
            </van-tab>
            <van-tab title="即将热映">
                <FancyList :request="onRequest1">
                    <template #default="scoped">
                        <FilmItem :data="scoped"/>
                    </template>
                </FancyList>
            </van-tab>
        </van-tabs>


    </div>
</template>

<script lang="ts" setup>
import FilmItem from './commponents/film-item.vue'
import FancyList,{type Iparams} from '@/components/fancy-list/index.vue'
import {getFilmList} from '@/api/modules/film'
 
const onRequest = async (params:Iparams) => {
    const result = await getFilmList({
        type: 1, //1.电影类型，2.即将上映
        cityId: 440300,
        pageNum: params.pageNum,
        pageSize: params.pageSize
    })

    return{
        list: result.films,
        total: result.total
    }
}

const onRequest1 = async (params:Iparams) => {
    const result = await getFilmList({
        type: 2, //1.电影类型，2.即将上映
        cityId: 440300,
        pageNum: params.pageNum,
        pageSize: params.pageSize
    })

    return{
        list: result.films,
        total: result.total
    }
}

</script>

<style lang="scss" scoped>
.films-page {
  height: 100%;
  overflow: hidden;
}

.van-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

:deep(.van-tabs__content) {
  flex: 1;
  overflow: hidden;
}

:deep(.van-tab__panel) {
  height: 100%;
  overflow: hidden;
}
</style>